<template>
    <view style="display: flex;flex-direction: column;background: #f3f3f3;height: 100vh;">
        <view style="margin-top: 50rpx;margin-left: 30rpx;">
            <p>我们将发送验证码到您的手机</p>
        </view>
        <view style="display: flex;flex-direction: column;">
            <view style="width: 90%; margin: 30rpx;">
                <view>
                    <uni-easyinput v-model="mobile" prefixIcon="person" focus placeholder="请输入手机号码"></uni-easyinput>
                </view>
            </view>
        </view>
        <view style="width: 100%;display: flex;justify-content: center;margin-top: 60rpx;">
            <view style="background-color: #ff393c;width: 50%;height: 100rpx;
           display: flex;align-items: center;justify-content: center;border-radius: 20rpx;
           color: #f3f3f3;width: 95%;" @click="hhh()">下一步</view>
        </view>
        <view style="display: flex;margin-left: auto;width: 260rpx;margin-top: 30rpx;">
            <span style="color: darkgray;">已有账号？</span>
            <span style="color:#ff393c;" @click="denglu">登录</span>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                mobile: '', //存储输入的数
            }
        },
        methods: {
            hhh() {
                if (this.mobile.length == 11) {
                    uni.navigateTo({
                        url: '/pages/zhuce/zhuce1?mobile=' + this.mobile
                    })
                } else {
                    uni.showToast({
                        icon: 'none',
                        title: '手机号码不正确'
                    })
                }

            },
            wei() {
                uni.showLoading({
                    title: '正在验证登录账号'
                });
                setTimeout(() => {
                    uni.hideLoading()
                }, 1000) //提示框延时一秒
            },
            denglu() {
                uni.navigateTo({
                    url: '/pages/denglu/denglu'
                })
            }

        }
    }
</script>

<style>
    /* 验证码-注册样式 */
    .zhuce {
        width: 680rpx;
        margin: auto;
        font-size: 30rpx;
        display: flex;
        /* 两边对齐 */
        justify-content: space-around;
        /* 盒子并排靠左 */
        flex-direction: row;
        /* 元素并排 */
        flex-wrap: nowrap;
        justify-content: space-between;
        margin: 20rpx;
    }

    /* 用户协议 */
    .propertyBox {
        width: 100%;
        display: flex;
        font-size: 26rpx;
        position: fixed;
        bottom: 50rpx;
        justify-content: center;
    }

    /* 头像样式 */
    .info_list1 {
        width: 150rpx;
        height: 150rpx;
        margin: 80rpx;
    }

    /* 忘记密码 */
    .wangji {
        width: 710rpx;
        display: flex;
        justify-content: flex-end;
        font-size: 25rpx;
        margin: 15rpx;
    }
</style>